




// 认证页面通用样式
.auth-container {
  width: 750rpx;
  height: 100vh;
  margin: 0 auto;
  background: linear-gradient(to bottom, $uni-primary-light 0%, $uni-bg-color 100%);
  background-size: 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .content {
    width: 92%;
    margin: 0 auto;
  } 

  .auth-title {
    padding: 0 10rpx;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 60rpx;

    .title {
      font-size: 60rpx;
      color: $uni-text-color;
      margin-bottom: 10rpx;
      font-weight: bold;
    }

    .subtitle {
      font-size: $uni-font-size-base;
      color: $uni-text-color-grey;
      margin-top: 10rpx;
    }
  }

  .input-list {
    padding: 0 10rpx;
    box-sizing: border-box;
    margin: 40rpx 0;

    .input-item {
      width: 88%;
      margin: 0 auto;
      margin-bottom: $uni-spacing-col-lg;
      position: relative;

      input {
        width: 100%;
        color: $uni-text-color;
        border: 1px solid $uni-border-color;
        height: 90rpx;
        border-radius: 45rpx;
        background: $uni-bg-color;
        text-align: center;
        padding: 0;
        transition: all 0.3s ease;

        &:focus {
          border-color: $uni-primary;
          box-shadow: 0 0 8rpx rgba($uni-primary, 0.3);
        }

        &::placeholder {
          text-align: center;
          color: $uni-text-color-placeholder;
        }
      }
    }

    .code-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      input {
        width: 60%;
        text-align: center;
        padding: 0;
      }

      .code-btn {
        width: 35%;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        border-radius: 45rpx;
        background: $uni-primary;
        color: $uni-text-color-inverse;
        font-size: $uni-font-size-base;
        &:active {
          opacity: 0.8;
        }
      }
    }
  }

  .auth-btn {
    background: $uni-primary;
    border-radius: 45rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    color: $uni-text-color-inverse;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    margin: 40rpx auto;
    width: 88%;
    box-shadow: 0 6rpx 20rpx rgba($uni-primary, 0.3);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 3rpx 10rpx rgba($uni-primary, 0.2);
    }
  }

  .bottom-links {
    margin-top: 40rpx;
    padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;

    .link {
      transition: all 0.3s ease;
      
      &:active {
        color: $uni-primary;
      }
    }
  }
} 